<template>
  <el-row class="h100">
    <el-col class="h100" :span="6">
      <div class="h100" ref="echartsRef1"></div>
    </el-col>
    <el-col class="h100" :span="6">
      <div class="h100" ref="echartsRef2"></div>
    </el-col>
    <el-col class="h100" :span="6">
      <div class="h100" ref="echartsRef3"></div>
    </el-col>
    <el-col class="h100" :span="6">
      <div class="h100" ref="echartsRef4"></div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const echartsRef1 = ref();
const echartsRef2 = ref();
const echartsRef3 = ref();
const echartsRef4 = ref();

const initChart = (dom: HTMLElement, title: string) => {
  const chart = echarts.init(dom);
  const colors = ['#FFD966'];
  const XData = ['有机质', '有效磷', '速效钾', '有效锌', '有效氮', '水溶态硼', '缓效钾', '有效硅', '有效锰'];
  const option = {
    color: colors,
    title: {
      text: title,
      bottom: 0,
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 40,
      top: 20,
      containLabel: true,
    },
    legend: {},
    xAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'category',
      splitLine: {
        show: false,
      },
      axisLine: {
        // lineStyle: { color: '#303133' },
      },
      axisTick: {
        show: false,
      },
      data: XData,
    },
    series: [
      {
        data: [820, -932, 901, 934, 1290, 1330, 1320, 934, 934],
        barMaxWidth: 25,
        barGap: '10%',
        type: 'bar',
      },
    ],
  };
  chart.setOption(option);
};

onMounted(() => {
  initChart(echartsRef1.value, '基台比相对变化率');
  initChart(echartsRef2.value, '偏基台值相对变化率');
  initChart(echartsRef3.value, '变异系数相对变化率');
  initChart(echartsRef4.value, '估计误差方差相对变化率');
});
</script>
